<script lang="ts" setup>
  import { pinyin } from '@/utils/pinyin'

  // 显示键盘
  const showKeyboard = ref(false)
  const currentPinyin = ref('') // 当前输入的拼音
  const inputValue = ref('') // 最终输入的文本
  const candidates = ref([]) // 候选汉字列表
  const pinyinEngine = ref() // 拼音引擎实例

  // 更新候选词
  async function updateCandidates() {
    console.log('初始化》', pinyinEngine.value)
    candidates.value = pinyinEngine.value
      .filter((item: any) => item.pinyin?.includes(currentPinyin.value.toLowerCase()))
      .map((item: any) => item.word)
      .slice(0, 6)
  }

  // 按键处理
  function handleKeyPress(key) {
    currentPinyin.value += key.toLowerCase()
    updateCandidates()
  }

  // 选择汉字
  function selectWord(word: string) {
    inputValue.value += word
    currentPinyin.value = ''
    candidates.value = []
  }

  // 退格
  function handleBackspace() {
    if (currentPinyin.value) {
      currentPinyin.value = currentPinyin.value.slice(0, -1)
      updateCandidates()
    } else if (inputValue.value) {
      inputValue.value = inputValue.value.slice(0, -1)
    }
  }

  // 空格
  function handleSpace() {
    if (candidates.value.length > 0) {
      selectWord(candidates.value[0]) // 选择第一个候选词
    } else {
      inputValue.value += ' '
    }
  }

  // 确认
  function handleConfirm() {
    showKeyboard.value = false
  }

  onMounted(() => {
    // 初始化拼音引擎（需提前加载词库）
    pinyinEngine.value = pinyin // new PinyinEngine(pinyin)
    console.log('拼音》', pinyin)
  })
</script>

<template>
  <!-- 自定义拼音键盘 -->
  <view class="custom-keyboard">
    <!-- 拼音输入显示区 -->
    <view class="pinyin-display">
      {{ currentPinyin }}
    </view>

    <!-- 汉字候选区 -->
    <scroll-view class="candidate-bar" scroll-x>
      <view v-for="(word, index) in candidates" :key="index" @click="selectWord(word)">
        {{ word }}
      </view>
    </scroll-view>

    <!-- 键盘主体 -->
    <view class="keyboard-keys">
      <!-- 第一行：Q W E R T Y U I O P -->
      <view class="keyboard-row">
        <button v-for="key in 'QWERTYUIOP'.split('')" :key="key" @click="handleKeyPress(key)">
          {{ key }}
        </button>
      </view>

      <!-- 第二行：A S D F G H J K L -->
      <view class="keyboard-row">
        <button v-for="key in 'ASDFGHJKL'.split('')" :key="key" @click="handleKeyPress(key)">
          {{ key }}
        </button>
      </view>

      <!-- 第三行：Z X C V B N M -->
      <view class="keyboard-row">
        <button v-for="key in 'ZXCVBNM'.split('')" :key="key" @click="handleKeyPress(key)">
          {{ key }}
        </button>
        <button @click="handleBackspace">⌫</button>
      </view>

      <!-- 第四行：空格、确认 -->
      <view class="keyboard-row">
        <button @click="handleSpace">空格</button>
        <button @click="handleConfirm">确定</button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  /* 自定义键盘样式 */
  .custom-keyboard {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f0f0f0;
    padding: 10rpx;
    z-index: 9999;
  }

  .pinyin-display {
    padding: 10rpx;
    font-size: 32rpx;
    background: #fff;
    border: 1rpx solid #ddd;
  }

  .candidate-bar {
    display: flex;
    padding: 10rpx;
    background: #fff;
    border: 1rpx solid #ddd;
  }

  .candidate-bar view {
    margin-right: 20rpx;
    padding: 5rpx 10rpx;
    background: #eef;
    border-radius: 5rpx;
  }

  .keyboard-keys {
    margin-top: 10rpx;
  }

  .keyboard-row {
    display: flex;
    margin-bottom: 10rpx;
  }

  .keyboard-row button {
    flex: 1;
    margin: 0 5rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    background: #fff;
    border: 1rpx solid #ddd;
    border-radius: 5rpx;
  }
</style>
